<template>
	<div class="dialog-contain">
		<el-dialog
			v-model="dialogVisible"
			width="35%"
			align-center
			:show-close="false"
			@close="handleClose"
		>
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<div :id="titleId" :class="titleClass">新增角色</div>
					<svg-icon icon-class="close-icon" @click="close" />
				</div>
			</template>
			<div class="content-box">
				<el-form
					:model="formData"
					:rules="rormRules"
					ref="formRef"
					@submit.native.prevent
				>
					<el-form-item label="角色名称" prop="roleName">
						<el-input
							v-model="formData.roleName"
							placeholder="请输入角色名称"
							clearable
						/>
					</el-form-item>
					<el-form-item label="角色描述" prop="roleDesc">
						<el-input
							v-model="formData.roleDesc"
							placeholder="请输入角色描述"
							clearable
						/>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="small" @click="submitHandler" class="button_view">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref } from "vue";
import {
	ElDialog,
	ElInput,
	ElButton,
	ElForm,
	ElFormItem,
	ElNotification,
} from "element-plus";
// import systemApi from "../../systemSetting.js";
import systemApi from "@/views/systemSetting/systemSetting"


// ---弹窗显隐控制---
let dialogVisible = ref(false);

// ---表单绑定值---
let formData = ref({
	roleName: "",
	roleDesc: "",
});
let rormRules = ref({
	roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
	roleDesc: [{ required: true, message: "请输入角色描述", trigger: "blur" }],
});
let formRef = ref(null);

// ---弹窗关闭---
let handleClose = () => {
	formRef.value.resetFields();
};

// ---提交事件---
let submitHandler = () => {
	formRef.value.validate(async (valid, fields) => {
		if (valid) {
			let res = await systemApi.role.roleCreate({
				name: formData.value.roleName,
				description: formData.value.roleDesc,
			});
			if (res) {
				ElNotification({
					title: "新增成功",
					type: "success",
				});
				dialogVisible.value = false;
				emits("submit");
			}
		}
	});
};

let emits = defineEmits("submit");

defineExpose({
	dialogVisible,
});
</script>
<style lang="scss" scoped>
.dialog-contain {
	:deep(.el-dialog) {
		.el-dialog__header {
			background: #f7f7fa;
			margin-right: 0;
			padding: 15px 20px;
			.my-header {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				.el-dialog__title {
					font-size: 16px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: bold;
					color: #1a1a1a;
					line-height: 24px;
				}
				.svg-icon {
					position: absolute;
					right: 0%;
					width: 25px;
					height: 25px;
					cursor: pointer;
				}
			}
		}
		.content-box {
			// display: flex;
			// justify-content: center;
			// align-items: center;
			padding: 0 15%;
			// span {
			// 	font-size: 14px;
			// 	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			// 	font-weight: bold;
			// 	color: #1a1a1a;
			// 	line-height: 21px;
			// 	white-space: nowrap;
			// 	margin-right: 15px;
			// }
		}
		.el-dialog__footer {
			text-align: center;
			.el-button {
				padding: 18px 25px;
				// border: none;
				// background: #fc7018;
				span {
					font-size: 14px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					// color: #ffffff;
				}
			}
		}
	}
}
</style>
